<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>标准Demo页面</title>
<meta name="decorator" content="default"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<jsp:include page="/WEB-INF/views/include/pageJs.jsp"/>
<style type="text/css">
	a:hover{
		text-decoration: none;
	}
	#page-wrap{
		position: relative;
	}

	.floatLeft{
		position: fixed;
		top: 20px;
		left: 20px;
		width: 130px;
	}
	.right-box{
		margin-left: 150px;
	}
	.floatLeft ul li a{
		display: block;
		height: 32px;
		line-height: 32px;
		color: #666;
		padding-left: 10px;
		border-left: 2px solid #fff;
		cursor: pointer;
	}
	.floatLeft ul li a:hover{
		border-left: 2px solid #2fa4e7;
		color: #2fa4e7;
	}
	.right-box h3{
		font-size: 18px;
		border-bottom: 1px solid #ccc;
	}
	.right-box .content{
		margin: 10px auto 20px;
	}
	.right-box .content p{
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 8px;
	}
	.right-box .content p code{
		font-size: 14px;
	}
	.right-box .content i.tip{
		display: block;
		padding: 4px;
		margin: 8px 0;
		border: 1px solid rgb(233,70,77);
		border-radius: 2px;
		background-color: rgba(233,70,77,0.1)
	}
	.right-box .content img{
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
	span.lit{
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 8px solid #317eac;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		margin-right: 6px;
	}
</style>
<script>
	//弹出框
	/* add for lxh 20160920
	url :...
	title:标题
	width：宽度
	height：高度
	top：窗口离顶部的距离,可以是百分比或像素(如 100px)
	use:打开新增窗口
	 */
	function opencreateWindow(url, title, width, height, topValue,isclose) {
		url = "iframe:"+ url;
		topValue = (topValue == '' ? '10%' : '10px');
		
		var buttons=isclose==true?{"关闭":"cancel"}:{};
		top.$.jBox.open(url, title, width, height,
				{
					persistent : true,
					top : topValue,
					buttons : buttons,
					submit : function(v, h, f) {
						/*  点击窗口按钮后的回调函数，返回true时表示关闭窗口，参数有三个，
						 v表示所点的按钮的返回值，
						 h表示窗口内容的jQuery对象，
						 f表示窗口内容里的form表单键值
						 */
					},
					closed : function() {
						/* 窗口关闭后执行的函数 */
						var istrue = $('#closedwindow',
								window.parent.document).val();
						if (istrue == "true") {
							//window.location.reload();
							$('#closedwindow', window.parent.document).val(
									"false");
							$("#btn_search").click();
						}
					}
				});
	}
</script>
</head>
<body>
	<div id="page-wrap" class="clearfix">
		<div class="floatLeft">
			<ul>
				<li><a href="#title">统一加载内容</a></li>
				<li><a href="#firstNav">一级导航条</a></li>
				<li><a href="#secondNav">二级导航条</a></li>
				<li><a href="#searchbar">搜索条件和操作按钮</a></li>
				<li><a href="#tree">tree插件</a></li>
				<li><a href="#openWindow">弹出窗统一样式</a></li>
				<li><a href="#openWindow-lc">带流程的弹出框</a></li>
				<li><a href="#openWindow-info">查看详情的弹出框</a></li>
				<li><a href="#openWindow-jbox">jbox弹出框</a></li>
				<li><a href="#js-pieces">js代码段</a></li>
			</ul>
		</div>
		<div class="right-box">
			<div id="title">
				<h3>统一加载内容</h3>
				<div class="content">
					<p>文档类型声明：<code>&lt;!DOCTYPE html &gt;</code>；</p>
					<p>页面需要载入的jsp页面统一放在head标签里；</p>
					<p>加载decorator：<code> &lt;meta name="decorator" content="default" /&gt;</code></p>
					<i class="tip">请将所有页面的  <code>&lt;jsp:include page="/WEB-INF/views/include/newhead.jsp" /&gt;</code> 替换成decorator </i>
				</div>
			</div>
			
			<div id="firstNav">
				<h3>一级导航条</h3>
				<div class="content">
					<p>这块统一由一个人维护即可；</p>
				</div>
			</div>
			
			<div id="secondNav">
				<h3>二级导航条</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/firstNav.png">
					<p>标准代码：</p>
					<pre>
						&lt;div class="boxcontent"&gt;
							&lt;div class="tabmenu"&gt;
								&lt;ul&gt;
									&lt;li class="tabselected" data-url=""&gt;&lt;/li&gt;
									&lt;li data-url=""&gt;&lt;/li&gt;
								&lt;/ul&gt;	
							&lt;/div&gt;	
						&lt;/div&gt;	
					</pre>
					<i class="tip">如果子页面包含三级导航条，请参考系统设置模块以及 systemIndex.jsp页面</i>
				</div>
			</div>
			
			<div id="searchbar">
				<h3>搜索条件和操作按钮</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/btn.png">
					<p>标准代码：</p>
					<pre>
						&lt;div class="search-bar"&gt;
							&lt;ul class="clearfix"&gt;
								&lt;li&gt;
									&lt;span&gt;项目名称：&lt;/span&gt;
									&lt;&gt;对应内容&lt;&gt;
								&lt;/li&gt;
							&lt;/ul&gt;
							&lt;div class="search-btn" id="btn_search"&gt;查询&lt;/div&gt;
							&lt;script&gt;
								$(function(){
									$(".search-bar ul li").each(function(){
										var spanWidth = $(this).find("span").width();
										$(this).find(".form-control").width(230-20-spanWidth);	
										$(this).children(".input-append").find(".required").width(230-20-36+1-spanWidth);	
										var barHeight = $(".search-bar").height();
										$(".search-btn").css("line-height", barHeight+"px");
									});
								})
							&lt;/script&gt;	
						&lt;/div&gt;	
						&lt;div class="btns"&gt;
							&lt;button type="button" class="btn-custom"&gt;新增&lt;/button&gt;
						&lt;/div&gt;
					</pre>
					<p>效果：</p>
					<div class="search-bar">
						<ul class="clearfix">
							<li>
								<span>文本输入框：</span>
								<input type="text" name="name" class="form-control">
							</li>
							<li>
								<span>下拉列表：</span>
								<select>
									<option>1</option>
									<option>2</option>
								</select>
							</li>
									
						</ul>
						<div class="search-btn" id="btn_search">查询</div>
						<script type="text/javascript">
							$(function(){
								$(".search-bar ul li").each(function(){
									var spanWidth = $(this).find("span").width();
									$(this).find(".form-control").width(230-20-spanWidth);	
									$(this).children(".input-append").find(".required").width(230-20-36+1-spanWidth);	
									var barHeight = $(".search-bar").height();
									$(".search-btn").css("line-height", barHeight+"px");
								});
							})
						</script>
					</div>
					<div class="btns">
						<button type="button" class="btn-custom" onclick="opencreateWindow('${ctx}/cha/chaProject/chaProjectForm','新增',1000,600,'10px',false)">新增</button>
						<button type="button" class="btn-custom" onclick="modify('${ctx}/cha/chaProject/chaProjectForm')">修改</button>
					</div>
					<i class="tip">所有操作按钮的基础class类为"btn-custom",请全部替换！</i>
					<i class="tip">弹出框请参考： 系统设置 → 收费对象 页面</i>
					<i class="tip">如果这个页面没有操作按钮，请这样写： <code>&lt;div class="search-bar" style="margin-bottom: 20px;" &gt;</code></i>
			</div>
			
			<div id="tree">
				<h3>tree插件</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/tree.png">
					<p>首先需要载入插件： <code>&lt; %@include file="/WEB-INF/views/include/treeview.jsp"% &gt;</code></p>
					<p>html代码</p>
					<pre>
						&lt;div class="l-left-small"&gt;
							&lt;div class="accordion-heading"&gt;
								&lt;a class="accordion-toggle"&gt;
									房产客户信息
									&lt;i class="icon-refresh pull-right" onclick="refreshTree();"&gt;&lt;/i&gt;
								&lt;/a&gt;
							&lt;/div&gt;
							&lt;div id="ztree" class="ztree"&gt;
								
							&lt;/div&gt;
						&lt;/div&gt;
					</pre>
					<i class="tip">初始化tree的js代码可以参考： 系统设置 → 收费对象 页面</i>
				</div>
			</div>
			
			<div id="openWindow">
				<h3>弹出框统一样式</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/window1.png">
					<i class="tip">在调用弹出框方法 opencreateWindow() 时，一律配置false，窗口宽度：如果不带流程为1000，带流程为1200；</i>
					<i class="tip">弹出框底部按钮不用配置关闭按钮，按钮居中显示，样式统一<code> &lt;button class="btn-custom"&gt; </code></i>
					<p>标准界面请参考： 系统设置 → 收费标准 → 新增</p>
				</div>
			</div>
			
			<div id="openWindow-lc">
				<h3>带流程的弹出框</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/window2.png">
					<i class="tip">如果弹出框包含流程，只需将 <code>&lt;ul class="form-box clearfix"&gt;</code> 添加class类：form-box-small</i>
					<p>如果输入框的标题内容过长 ，无法一行显示，需要在<em style="color: red; font-size: 16px">该页面调整其宽度</em>，使其保持一行显示，应预留出提示文字的宽度，代码如下（根据实际情况设定数值）：</p>
					<pre>
						&lt;style type="text/css"&gt;
							.form-box-small li p{
								width: 132px;
							}
							.form-box-small li .form-right{
								margin-left: 132px;
							}
							.form-box-small li .form-right input{
								width: 160px;
							}
							.form-box-small li .input-append input{
								width: 124px;
							}
							.form-box-small li .select2-container{
								width: 175px;
							}
						&lt;/style&gt;
					</pre>
					<p>标准界面请参考：收费管理 → 应收管理 → 费用调整</p>
				</div>
			</div>
			
			<div id="openWindow-info">
				<h3>查看详情的弹出框</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/window3.png">
					<p>在新增和修改的页面基础上，只需将 <code>&lt;input&gt;</code> 替换成 <code>&lt;span&gt;</code> 代码如下：</p>
					<pre>
						&lt;ul class="form-box clearfix"&gt;
							&lt;li&gt;
								&lt;p&gt;分期编码：&lt;/p&gt;
								&lt;div class="form-right"&gt;
									&lt;span&gt;${objPeriod.periodCode}&lt;/span&gt;
								&lt;/div&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;p&gt;分期名称：&lt;/p&gt;
								&lt;div class="form-right"&gt;
									&lt;span&gt;${objPeriod.periodName}&lt;/span&gt;
								&lt;/div&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					</pre>
				</div>
			</div>
			
			<div id="openWindow-jbox">
				<h3>jbox弹出框</h3>
				<div class="content">
					<img src="${ctxStatic}/imgs/demo/window4.png">
					<p>标准代码如下：</p>
					<pre>
						&lt;div class="search-bar search-bar-small"&gt;
							&lt;span&gt;收费项目名称：&lt;/span&gt;
							&lt;form:input path="name" type="text" class="form-control"  placeholder="收费项目名称" /&gt;
							&lt;button type="submit" class="btn-custom" id="btn_search"&gt;查询&lt;/button&gt;
						&lt;/div&gt;
					</pre>
					<i class="tip">窗口下方只需要一个确定按钮，其他的按钮都需要去掉,参考界面： 系统设置 → 收费标准 → 新增 → 收费项目</i>
				</div>
			</div>
			
			<div id="js-pieces">
				<h3>js代码段</h3>
				<div class="content">
					<p>大家请规范一下页面的js代码，尽量只有一组 <code>&lt;script/&gt;</code> 标签，各自的js代码段加上注释;</p>
					<h6><span class="lit"></span>有三级导航条的页面高度调整，在显示三级菜单页面加入调整代码：</h6>
					<p>代码如下：</p>
					<pre>
						//三级导航与右侧iframe高度调整
						var rhight,lheight;
						$("#contentMain").bind("load",function () {
							$(".l-right-big").height($(this).height());
						    rhight=$(".l-right-big").height();
						    lheight=$(".l-left-small").height();
						    $(".l-left-small").css("height",rhight+2+"px");
						  	//子页面iframe加载完毕后调整父iframe的高度
						    $("#contentMain",window.parent.document).height(rhight+40);
						});
					</pre>
					<p>完整页面请参考： 系统设置 → 权限管理 </p>
					<p>代码页面请参考： sys/systemIndex1.jsp</p>
					
					<h6><span class="lit"></span>有左侧树时，在该页面加入调整代码：</h6>
					<p>代码如下：</p>
					<pre>
						//iframe高度根据子页面高度调整，最小400，左侧栏高度联调，树高度联调
						$("#contentMain").load(function () {
						    var mainheight = $(this).contents().find("html").height();
						    mainheight > 400 ? ($(this).height(mainheight),$(".l-left-small").height(mainheight),$("#ztree").css("max-height",mainheight-50+"px")) : ($this.height(400),$(".l-left-small").height(400),$("#ztree").css("max-height","350px"));
						});
					</pre>
					<p>完整页面请参考： 系统设置 → 收费对象 </p>
					<p>代码页面请参考： cha/chaObjectStandardIndex.jsp</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>